<template>
  <!-- <transition appear name="mytodo">  动画效果 -->
  <li>
    <label>
      <!-- <input type="checkbox" :checked="todoObj.done" /> -->
      <!-- <input type="checkbox" v-model="isMyCheck" /> -->
      <input type="checkbox" :checked="todoObj.done" @change="changeObj(todoObj.id)" />
      <span v-show="!todoObj.isEdit">{{ todoObj.title }}</span>
      <span v-show="todoObj.isEdit">
        <input type="text" :value=todoObj.title ref="inputTitle" @blur="handleBlur(todoObj, $event)" /></span>
    </label>
    <button class="btn btn-danger" @click="mydelete(todoObj.id)">删除</button>
    <button class="btn btn-edit" @click="myEdit(todoObj)">编辑</button>
  </li>
  <!-- </transition> -->
</template>

<script>
import pubsub from "pubsub-js"
export default {
  name: "MyItem",
  props: ["todoObj"], //"changeDone","deleteTodo"
  data() {
    return { isMyCheck: this.todoObj.done };  //为不直接在模板中操作props中传传递过来的数据，
  },
  methods: {
    mydelete(id) {
      if (confirm('你确定要删除吗?')) {
        //this.deleteTodo(id)
        //this.$bus.$emit('deleteTodo',id)
        pubsub.publish('deleteTodo', id)  //使用发布的方式调用
      }
    },
    myEdit(obj) {
      if (obj.hasOwnProperty('isEdit')) {
        obj.isEdit = true
      } else {
        this.$set(obj, 'isEdit', true)
      }

      this.$nextTick(function () {  //在 dom更新后再执行
        this.$refs.inputTitle.focus() //获取焦点
      })
    },
    handleBlur(obj, e) {
      if (!e.target.value.trim()) return alert('输入不能为空')
      obj.isEdit = false
      this.$bus.$emit('updateTodo', obj.id, e.target.value)
    },
    changeObj(id) {
      this.$bus.$emit('changeDone', id)
    }
  },
  watch: {
    isMyCheck(newVal) {
      this.todoObj.done = newVal; //可能vue监视不到done的更改，待确认e
    }
  }
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  background-color: bisque;
}

li label {
  /* float: left; */
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #ddd;
}

li:hover button {
  display: block;
}

/* 动画 begin */
/* 进入的起点、离开的终点 */
.mytodo-enter,
.mytodo-leave-to {
  transform: translateX(-100%);
}

.mytodo-enter-active,
.mytodo-leave-active {
  transition: 0.5s linear;
}

/* 进入的终点、离开的起点 */
.mytodo-enter-to,
.mytodo-leave {
  transform: translateX(0);
}

/* 动画 end */
</style>
